<template>
    <div class="team-member" :class="{
        'leader-background': member.students.studentName === leader,
        'non-leader-background': member.students.studentName !== leader
    }">
        <img :src="member.students.avatar" :alt="`成员${member.students.studentName}的头像`" class="team-image">
        <h3 class="team-studentName"> <span class="class-name">{{ member.students.className }}</span><br>
            {{ member.students.studentName }}</h3>
        <div>
            <!-- 设置为组长 -->
            <!-- <i class="el-icon-setting" style="width: 40px; height: 40px;" title="设为组长"
                @click="settingHandle(member.students.studentName)"></i> -->
            <Groups ref="groups"></Groups>
            <i class="el-icon-remove-outline" style="width: 40px; height: 40px;" title="删除成员"
                @click="deleteHandle(member.studentId, member.students.studentName)"></i>
        </div>
    </div>
</template>

<script>
import { deleteMemberAPI, getGroupMemberAPI } from "@/api/groupMember";
import { editGroupsAPI, deleteGroupsAPI } from "@/api/groups";
export default {

    props: ['member', 'leader','courseId'], // 添加leader prop
    data() {
        return {
            groupId: ''
        };
    },
    mounted() {
        this.groupId = this.$route.query.groupId
        console.log('group' + this.groupId);
        console.log('courseId:' + this.courseId);

    },
    methods: {
        //删除按钮
        deleteHandle(studentId, studentName) {
        console.log('cou' + this.courseId);
            //删除成员
            if (studentName !== this.leader) {
                this.$confirm('确认删除该成员, 是否继续?', '确定删除', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteMember(studentId)
                })
            } else {
                //删除组长
                this.$confirm('此人为组长，删除即解散小组！！确认删除该成员, 是否继续?', '确定删除', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteMember(studentId, studentName)
                })
            }
        },
        // 设为组长
        // settingHandle(studentName) {
        //     console.log(studentName);
        //     let newData = {
        //         courseId: this.courseId,
        //         leader: this.groupTableData.leader
        //     }
        //     //修改 (Path:groupId , Boby: courseId,.leader)
        //     editGroupsAPI(this.allId, newData).then(res => {
        //         if (res.code == 200) {
        //             this.$message.success('修改小组成功')
        //             this.getAllGroups()
        //         }
        //         else {
        //             this.$message.error('修改小组失败')
        //         }
        //         this.dialogVisible = false
        //     }).catch((error) => {
        //         console.log(error);
        //     })

        // },
        //删除方法
        deleteMember(studentId, studentName) {
            //准备Body
            let body = {
                groupId: this.groupId,
                studentId: studentId
            }
            deleteMemberAPI(body).then((res) => {
                if (res.code == 200) {
                    this.$message.success('删除该成员成功！')
                    // TODO 实现整体刷新 （这里用返回替代）
                    // this.$router.back()
                    //调用父组件的方法，实现整体刷新
                    this.$parent.getGroupMembers()
                    //删除的是组长则返回小组管理页面
                    if (studentName !== null) {
                        console.log('aaaa');
                        deleteGroupsAPI(this.groupId).then(res => {
                            if (res.code == 200) {
                                this.$message.success('删除小组成功！')
                                //跳回小组管理
                                this.$router.push({ path: '/groups/getByCourseId', query: { courseId: this.courseId } });
                            } else {
                                this.$message.error('删除小组失败！')
                            }
                            // this.getAllGroups()
                        }).catch(() => {
                            this.$message.console.error('删除小组失败！');
                        })
                        // this.$router.back()
                    }
                    // this.$emit('member-deleted'); // Emit an event after successful deletion
                    // this.$forceUpdate();
                } else {
                    this.$message.error('删除该成员失败！')
                }
            })
            .catch((error) => {
                console.error('Error deleting member:', error);
                // this.$message.error('删除该成员失败！');
            });
            //调用同文件夹的index.vue内的getGroupMembers()方法
            // console.log('删除');

            // this.$router.push({ path: '/groupMemberships/getByGroupId', query: { groupId: body.groupId } });

        },
        // getGroupMembers() {
        //     console.log(this.groupId);
        //     getGroupMemberAPI(this.groupId).then((res) => {
        //         console.log(res.data);
        //         this.teamMembers = res.data
        //     })
        // },
    }
}
</script>

<style scoped>
/* 非领导成员的背景样式 */
.non-leader-background {
    /* 定义非领导成员的背景样式 */
    background-color: #C0C0C0
        /* 示例背景颜色 */
}

.leader-background {
    background-color: #9999FF
        /* 设置组长的背景色为红色 */
}

.team-member {
    display: flex;
    /* 使用Flexbox */
    flex-direction: column;
    /* 子元素垂直排列 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    width: 200px;
    /* 示例宽度 */
    height: 250px;
    /* 示例高度 */
    border: 1px solid #ccc;
    /* 可选，仅为了显示边界 */
    text-align: center;
    /* 确保文本也水平居中（对于非Flex子元素） */
    padding: 10px;
    /* 可选，内边距 */
    box-sizing: border-box;
    /* 包括内边距和边框在总宽度和高度内 */
    position: relative;
    font-size: 25px;
}

.class-name {
    font-family: 'Arial', sans-serif;
    /*  班级名称字体 替换为你想要的字体 */
}

.team-image {
    width: 100px;
    /* 示例图片宽度 */
    height: 100px;
    /* 示例图片高度 */
    object-fit: cover;
    /* 保持图片比例，但完全覆盖容器 */
    border-radius: 50%;
    /* 可选，将图片变成圆形 */
}

.team-studentName {
    margin-top: 10px;
    /* 与图片之间的间距 */
}

.el-icon-setting,
.el-icon-remove-outline {
    position: absolute;
    bottom: 0;
}

.el-icon-setting {
    right: 30px;
    /* 调整这个值来改变图标的位置 */
    color: rgb(68, 71, 68)
}

.el-icon-remove-outline {
    right: 00px;
    /* 调整这个值来确保图标之间有适当的间距 */
    color: rgb(192, 21, 21);

}
</style>